<template>
	<div class="zgyh-box">
		<div class="example-3d">
			<swiper class="swiper" :options="swiperOption">
				<swiper-slide v-for = "v in banner" key= 'v.dotBanner'><img :src="v.url" @click="clickBannerImg(v.link,v.dotBanner)" /></swiper-slide>
				<!--<div class="swiper-pagination" slot="pagination"></div>-->
			</swiper>
		</div>
	</div>
</template>

<script>
	//import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		data() {
			return {
				banner: [
//				{
//					'url': 'https://reboluxiang1.oss-cn-shanghai.aliyuncs.com/saas/banner-ts.png',
//					'link': 'https://weixin.txbapp.com/app/operatorzh/home?act=bochina&v=op001',
//					'dotBanner': 'featureBanner_1'
//				},
//				{
//					'url': 'https://reboluxiang1.oss-cn-shanghai.aliyuncs.com/saas/banner-ts2.jpg?x-oss-process=image/resize,m_fixed,h_280,w_690',
//					'link': 'https://minsight.speiyou.com/page/activity/welfare/home?noauth=1&logo=zgyh',
//					'dotBanner': 'featureBanner_2'
//				},
//				{
//					'url': 'https://reboluxiang1.oss-cn-shanghai.aliyuncs.com/saas/banner-ts3.jpg?x-oss-process=image/resize,m_fixed,h_280,w_690',
//					'link': 'https://tjsc.xdf.cn/webPage/bankguowai/',
//					'dotBanner': 'featureBanner_3'
//				},
				{
					'url': 'https://saas-zgyh.oss-cn-shenzhen.aliyuncs.com/banner-zhyf-1.png?x-oss-process=image/resize,m_fixed,h_280,w_690',
					'link': 'https://saas.yundzh.com/#/zgyh/educationHome?id=34',
					'dotBanner': 'featureBanner_4'
				},
				{
					'url': 'https://saas-zgyh.oss-cn-shenzhen.aliyuncs.com/banner-zhyf-2.png?x-oss-process=image/resize,m_fixed,h_280,w_690',
					'link': 'https://saas.yundzh.com/#/zgyh/educationHome?id=34',
					'dotBanner': 'featureBanner_5'
				}
				],
				
				swiperOption: {
					effect: 'coverflow',
					//grabCursor: true,
					centeredSlides: true,
					slidesPerView: 'auto',
					speed:500,
					spaceBetween: 40, // 在slide之间设置距离（单位px）。
					loop: true,
					cubeEffect: {
					    slideShadows: true,
					    shadow: true,
					    shadowOffset: 10,
					    shadowScale: 0.6
					  },
					autoplay: {
						delay: 5000,
						stopOnLastSlide: false,
						disableOnInteraction: false,
					},
					coverflowEffect: {
						rotate: 0,
						stretch: 0,
						depth: 100,
						// modifier: 1,
						slideShadows : true
					},
					pagination: {
						el: '.swiper-pagination'
					}
				}
			}
	},
	methods:{
			clickBannerImg(link,dotId){
				this.dotNum(link,dotId);
			},
			dotNum(link,dotId) { //统计
				let _this = this;
				var argumentData = {
					sessionId: dotId, //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							if(res.data.code==="000000"){//打点成功 跳转页面
								if(window.terminal.isZxjtqhApp){
								    fun.zxjtqhLinkUrl(link)
								}else{
								    window.location.href = link;
								}
							}
							
						},
						err => {
							console.log(err);
						}
					);
			},
	}
	}
</script>
<style scoped="scoped">
	.swiper-slide{
		box-shadow: 0  5px  15px  0 #C5C5C5;
		border-radius: 10px !important;		
		}
	.example-3d {
		width: 100%;
		height: 350px;
		padding-top: 20px;
		/*padding-bottom: 50px;*/
	}
	
	.swiper {
		height: 100%;
		width: 100%;
	}
	
	.swiper-slide {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690px;
		height: 280px;
		text-align: center;
		font-weight: bold;
		background-color: white;
		background-position: center;
		background-size: cover;
		border-radius: 10px;
	}
	.swiper-slide img{
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.swiper-pagination {
		/*/deep/ .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: $white;*/
	}
	.swiper-pagination-bullet{
		background: salmon !important;
	}
	/*swiper-pagination-bullet swiper-pagination-bullet-active*/
</style>